import { api } from "@/lib/api";
import { fmtInt } from "@/lib/format";
import { OG_CONTENT_TYPE, OG_SIZE, renderOg } from "@/lib/og-template";
import { SCOPE_LABEL, fmtRankValue } from "../ranking-format";

export const alt = "DataCenterIndex ranking";
export const size = OG_SIZE;
export const contentType = OG_CONTENT_TYPE;
export const revalidate = 3600;

export default async function Image({ params }: { params: Promise<{ key: string }> }) {
  const { key } = await params;
  const r = await api.ranking(key, { limit: 3 });
  if (!r.ok) return renderOg({ eyebrow: "Ranking", title: "DataCenterIndex rankings", subtitle: "Countries, markets and operators ranked by facilities, capacity and pipeline." });
  const d = r.data;
  const rows = d.rows ?? [];
  const stats = rows.length ? rows.slice(0, 3).map((row) => ({ label: `#${row.rank} ${row.name}`.slice(0, 28), value: fmtRankValue(row.value, d.unit) })) : [{ label: "Entities ranked", value: fmtInt(d.total) }];
  return renderOg({ eyebrow: "Ranking", title: d.label, subtitle: `${SCOPE_LABEL[d.scope]} · ${d.unit}`, stats });
}